<template>
	<div id="newCustomerEx" class="newCustomerEx">
		<h2>学员成长计划表</h2>
		<group>
			<popup-picker title="兴趣" :data="interests_list" v-model="body.interests" value-text-align="right"></popup-picker>
			<popup-picker title="性格" :data="character_list" v-model="body.character" value-text-align="right"></popup-picker>
			<popup-picker title="教育决策" :data="decision_made_list" v-model="body.decision_made" value-text-align="right"></popup-picker>
			<popup-picker title="喜爱的颜色" :data="favorite_color_list" v-model="body.favorite_color" value-text-align="right"></popup-picker>
			<popup-picker title="语言发育" :data="language_list" v-model="body.language" value-text-align="right"></popup-picker>
			<popup-picker title="手部精细" :data="hand_details_list" v-model="body.hand_details" value-text-align="right"></popup-picker>
			<popup-picker title="玩具数量" :data="dolls_number_list" v-model="body.dolls_number" value-text-align="right"></popup-picker>
			<popup-picker title="反应能力" :data="reaction_ability_list" v-model="body.reaction_ability" value-text-align="right"></popup-picker>
			<popup-picker title="自信心" :data="confidence_list" v-model="body.confidence" value-text-align="right"></popup-picker>
			<popup-picker title="抗挫能力" :data="setback_resist_list" v-model="body.setback_resist" value-text-align="right"></popup-picker>
			<popup-picker title="家庭住址" :data="address_list" v-model="body.address" value-text-align="right"></popup-picker>
			<x-switch class="customerSwitch" title="是否剖腹产" :value-map="[false, true]" v-model="body.is_cesarean" label-align="left"></x-switch>
			<x-switch class="customerSwitch" title="吐字清晰" :value-map="[false, true]" v-model="body.is_clear_speak" label-align="left"></x-switch>
			<x-switch class="customerSwitch" title="认生" :value-map="[false, true]" v-model="body.is_shy" label-align="left"></x-switch>
			<x-switch class="customerSwitch" title="隔代带养" :value-map="[false, true]" v-model="body.is_grand_raise" label-align="left"></x-switch>
			<x-switch class="customerSwitch" title="哭闹表达需求" :value-map="[false, true]" v-model="body.is_cry_for_request" label-align="left"></x-switch>
			<popup-picker v-if="body.is_cry_for_request == true" title="哭多久妥协" :data="compromise_list" v-model="body.compromise" value-text-align="right"></popup-picker>
			<x-switch class="customerSwitch" title="是否母乳" :value-map="[false, true]" v-model="body.is_breast_fed" label-align="left"></x-switch>
			<x-input v-if="body.is_breast_fed == true" title="母乳几个月" type="number" v-model="body.breast_fed_long"></x-input>
			<x-switch class="customerSwitch" title="是否游泳" :value-map="[false, true]" v-model="body.is_swimming" label-align="left"></x-switch>
			<x-switch class="customerSwitch" title="是否接触电子产品" :value-map="[false, true]" v-model="body.is_touch_edevice" label-align="left"></x-switch>
			<popup-picker v-if="body.is_touch_edevice == true" title="主要接触哪种" :data="edevice_type_list" v-model="body.edevice_type" value-text-align="right"></popup-picker>
			<popup-picker v-if="body.is_touch_edevice == true" title="接触频次" :data="edevice_frequency_list" v-model="body.edevice_frequency" value-text-align="right"></popup-picker>
			<x-switch class="customerSwitch" title="是否绘本阅读" :value-map="[false, true]" v-model="body.is_reading_book" label-align="left"></x-switch>
			<popup-picker v-if="body.is_reading_book == true" title="阅读频次" :data="reading_frequency_list" v-model="body.reading_frequency" value-text-align="right"></popup-picker>
			<x-textarea title="教育需求" placeholder="写下家长的需求" :max="100" :show-counter="false" :height="100" :rows="8" :cols="30" v-model="body.request"></x-textarea>
		</group>
		<div class="error" v-show="error">{{error}}</div>

		<flexbox>
			<flexbox-item>
				<x-button class="flexBtn" type="primary" @click.native="createCustomer">完成</x-button>
			</flexbox-item>
			<flexbox-item>
				<x-button class="flexBtn" type="warn" @click.native="cancel">取消</x-button>
			</flexbox-item>
		</flexbox>

	</div>
</template>

<script>
	import NetWorking from '../../../../../utils/networking'
	import PickList from '../../../../../components/mobile/picklist/picklist'
	import {Group, XInput, XButton, PopupPicker, Popup, XSwitch, Flexbox, FlexboxItem, XTextarea} from 'vux'
	export default {
		name: "newCustomerExDetails",
		components:{
			XSwitch,
			PickList,
			Group,
			XInput,
			XButton,
			PopupPicker,
			Popup,
			XTextarea,
			FlexboxItem,
			Flexbox
		},
		data() {
			return {
				body: {
					customer_id: this.$route.params.id,
					request: '',
					breast_fed_long: '',
					is_cesarean: false,
					is_clear_speak: false,
					is_shy: false,
					is_grand_raise: false,
					is_cry_for_request: false,
					is_breast_fed: false,
					is_swimming: false,
					is_touch_edevice: false,
					is_reading_book: false,
					interests: [],
					character: [],
					decision_made: [],
					address: [],
					favorite_color: [],
					language: [],
					hand_details: [],
					compromise: [],
					dolls_number: [],
					reaction_ability: [],
					confidence: [],
					setback_resist: [],
					edevice_type: [],
					edevice_frequency: [],
					reading_frequency: []
				},
				error: '',
				interests_list: [['球','车','搭建类']],
				character_list: [['内向','外向','窝里横','慢热']],
				decision_made_list: [['爸爸', '妈妈', '商量']],
				address_list: [['华贸城', '润泽', '世华泊郡', '福熙大道', '北苑其他小区','非北苑小区']],
				favorite_color_list: [['红', '黄', '蓝', '绿']],
				language_list: [['不会说话', '只会叫爸妈', '单个词简单表达', '整句表达']],
				hand_details_list: [['大把抓', '三指捏', '二指捏']],
				compromise_list: [['立即妥协', '哭一会儿妥协', '哭声免疫不妥协']],
				dolls_number_list: [['10种', '20种', '30种以上']],
				reaction_ability_list: [['优秀','良好','一般','差']],
				confidence_list: [['优秀','良好','一般','差']],
				setback_resist_list: [['优秀','良好','一般','差']],
				edevice_type_list: [['手机','平板','电视','早教机']],
				edevice_frequency_list: [['每天半小时','每天不限制','每周两三次']],
				reading_frequency_list: [['偶尔','每天几本','每天十本','每天几十本']]
			}
		},
		created: function() {
			this.$emit('showTabbar',false)
		},
		methods: {
			cancel: function () {
				this.$emit('showTabbar', true)
				this.$router.go(-1)
			},
			createCustomer: function () {

				let _this = this
				NetWorking.doPost(
					'/ylyn',
					null,
					{
						customer_id: this.$route.params.id,
						request: this.body.request,
						breast_fed_long: this.body.breast_fed_long,
						is_cesarean: this.body.is_cesarean,
						is_clear_speak: this.body.is_clear_speak,
						is_shy: this.body.is_shy,
						is_grand_raise: this.body.is_grand_raise,
						is_cry_for_request: this.body.is_cry_for_request,
						is_breast_fed: this.body.is_breast_fed,
						is_swimming: this.body.is_swimming,
						is_touch_edevice: this.body.is_touch_edevice,
						is_reading_book: this.body.is_reading_book,
						interests: this.body.interests[0],
						kid_character: this.body.character[0],
						decision_made: this.body.decision_made[0],
						address: this.body.address[0],
						favorite_color: this.body.favorite_color[0],
						language: this.body.language[0],
						hand_details: this.body.hand_details[0],
						compromise: this.body.compromise[0],
						dolls_number: this.body.dolls_number[0],
						reaction_ability: this.body.reaction_ability[0],
						confidence: this.body.confidence[0],
						setback_resist: this.body.setback_resist[0],
						edevice_type: this.body.edevice_type[0],
						edevice_frequency: this.body.edevice_frequency[0],
						reading_frequency: this.body.reading_frequency[0]
					},
					null
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.$router.go(-1)
						}else{
							alert(rs.error_message);
						}
					}
				)

				this.$emit('showTabbar', true)
			}
		}
	}
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

	.flexBtn {
		width: 80% !important;
		margin-top: 15px;
		margin-bottom: 5px;
		border-radius: 25px;
	}

	.newCustomerEx {
		border: solid;
		border-color: #f7f7fa;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 56px;
		box-shadow: 5px 5px 5px #888888;
		border-radius: 25px;
		margin-bottom: 100px;
	}
	.buttonCustomer {
		border-radius: 25px;
		margin-top: 15px;
	}

	.customerCell {
		height: 1.41176471em !important;
		line-height: 1.41176471 !important;
	}

	.customerSwitch > .weui-cell__bd{
		text-align: left !important;
	}

	.weui-cells {
		font-size: 14px !important;
	}

	.newCustomerEx > .vux-flexbox {

	}
</style>
